<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_batch_import')" :visible.sync="visible"
    custom-class="dialog_big" destroy-on-close>
    <div v-loading="loading">
      <el-form :model="form" ref="form" label-position="top">
        <el-form-item>

          <button_select_file @input="uploadFile" type="primary">
            {{ $tt('label_import_excel') }}
            <i class="el-icon-upload2 el-icon--right"></i>
          </button_select_file>
          <el-button @click="downloadImportTemp" size="mini" type="primary">
            {{ $tt('label_download_import_template') }}<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </el-form-item>
        <el-form-item prop="tableList">
          <ex_super_table ref="table" v-bind="tableBaseOption" :data="form.tableList" height="600">
          </ex_super_table>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog_footer">
        <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
        <el-button type="primary" @click="submit">{{ $tt('label_submit') }}</el-button>
      </span>
    </div>

  </el-dialog>
</template>

<script>

// import xlsx from '@/asset/xlsx.full.min.js'
// import { log } from 'shelljs/src/common';
// import ExcelJS from '@/asset/exceljs.bare.min.js'
export default {
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        tableList: [],
      },
      tableBaseOption: {
        model: [
          {
            key: 'addressName', label: 'label_place_name',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.addressName}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'addressAbb', label: 'label_place_abb',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.addressAbb}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'basePlaceType', label: 'label_place_type',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.basePlaceType}
                    onChangeItem={e => {
                      this.$set(row, column.property, e._label)
                    }}
                    type='select'
                    enum='BasePlaceTypeEnum'
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'contacts', label: 'label_contact',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.contacts}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'contactNumber', label: 'label_contact_phone',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.contactNumber}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'addressDetail', label: 'label_detail_address',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.addressDetail}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'countryName',
            label: 'label_country',
            'min-width': 120,
            renderHeader: (h, { column, $index }) => (
              <div class="table-require">{column.label}</div>
            ),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.countryName}
                    onInput={
                      value => this.$set(row, column.property, value)
                    }
                    type='select'
                    url='/tms-api/client/TmsPlaceInfoClientRpc/selectCountry.json'
                    storeData
                    filterable
                    option={{
                      label: it => this.$formatNameCode(it.countryName, it.countryCode),
                      value: 'countryName'
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'province', label: 'label_province',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.province}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'city', label: 'label_city',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.city}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'county',
            label: 'label_county',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.county}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'postalCode',
            label: 'label_post_code',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.postalCode}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'longitude',
            label: 'label_lon',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.longitude}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              );
            }
          },
          {
            key: 'latitude',
            label: 'label_lat',
            'min-width': 120,
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  <ex_super_input
                    value={row.latitude}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              );
            }
          },
          { key: 'errorMsg', fixed: "right", label: 'label_error_info', 'min-width': 200, 'show-overflow-tooltip': true, },
          {
            type: 'operate',
            width: 120,
            fixed: "right",
            operate: [{
              label: 'label_delete',
              click: (row, index) => {
                this.deleteFn(row, index)
              }
            }]
          }
        ],
      },
      formRules: {
        addressName: {
          required: true,
          message: this.$t("tip_can_no_empty"),
          trigger: "blur",
        },
        addressAbb: {
          required: true,
          message: this.$t("tip_can_no_empty"),
          trigger: "blur",
        },
        basePlaceTypeEnum: {
          required: true,
          message: this.$t("tip_can_no_empty"),
          trigger: "blur",
        },
        countryName: {
          required: true,
          message: this.$t("tip_can_no_empty"),
          trigger: "blur",
        },
      },
    }
  },
  methods: {
    show() {
      this.$set(this.form, 'tableList', [])
      this.visible = true
    },
    // 下载模版
    downloadImportTemp() {
      window.open('https://kyb-bronze-public-oss.oss-cn-shenzhen.aliyuncs.com/default_template/client_address_import_template.xlsx')
    },
    // 导入
    uploadFile(e) {
      this.$uploadFile({
        loading: true,
        url: '/oms-api/base/OmsBaseClientAddressRpc/importExcel.json',
        file: e[0],
        success: ({ data }) => {
          this.tipsFn(data)
        }
      })
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$ajax({
            url: "/oms-api/base/OmsBaseClientAddressRpc/handleBatchImport.json",
            method: 'post',
            type: 'json',
            loading: this.$t('tip_submiting'),
            data: { omsBaseClientAddressList: this.form.tableList },
            success: ({ data }) => {
              this.tipsFn(data)
            },
          })
        } else {
          this.$message.error(this.$t('form_validate_error'))
          return false;
        }
      });
    },
    deleteFn(row, index) {
      this.form.tableList.splice(index, 1);
    },
    tipsFn(data) {
      const msg = this.$t('label_tms_import_tips', [data.totalNum, data.successNum, data.failNum])
      this.$message.info(msg)

      this.$set(this.form, 'tableList', data.errorOmsBaseClientAddressList)

      //全部成功时 可以关闭弹窗
      if (data.failNum === 0) {
        this.visible = false
      }
      //有成功导入 更新页面数据
      if (data.successNum > 0) {
        this.$emit("submitSuccess")
      }

    }
  }
}
</script>
